<!DOCTYPE html>
<html>
  <head>
    {include file="common/meta" /}

    <style type="text/css">
      body {
        color: #999;
        background-color: #333333;
        background-size: cover;
      }

      a {
        color: #444;
      }

      .login-screen {
        max-width: 900px;
        padding: 0;
        margin: 150px auto 0 auto;
      }

      .login-screen .well {
        display: flex;
        border-radius: 3px;
        -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 1);
        border: none;
        /*overflow: hidden;*/
        padding: 0;
      }

      @media (max-width: 767px) {
        .login-screen {
          padding: 0 20px;
        }
      }

      .logo {
        display: flex;
        justify-content: center;
      }

      .logo-img-card {
        width: 131px;
        height: 40px;
        display: block;
      }

      .profile-name-card {
        text-align: center;
      }

      .login-head {
        width: 500px;
        /* background: #899fe1; */
        border-radius: 3px 3px 0 0;
      }

      .login-form {
        width: 400px;
        padding: 40px 30px;
        position: relative;
        z-index: 99;
      }

      #login-form {
        margin-top: 20px;
      }

      #login-form .input-group {
        margin-bottom: 15px;
      }

      #login-form .form-control,
      #login-form .input-group-addon {
        font-size: 13px;
        border: none;
        border-bottom: 1px solid #e9e9e8;
      }
    </style>
    <!--@formatter:off-->
    {if $background}
    <style type="text/css">
      body {
        background-image: url("{$background|htmlentities}");
      }
    </style>
    {/if}
    <!--@formatter:on-->
  </head>
  <body>
    <div class="container">
      <div class="login-wrapper">
        <div class="login-screen">
          <div class="well">
            <div class="login-head">
              <img
                src="__CDN__/assets/img/login/login-l.png"
                style="width: 100%;height: 100%;"
              />
            </div>
            <div class="login-form">
              <div class="logo">
                <img
                  id="logo-img"
                  class="logo-img-card"
                  src="__CDN__/assets/img/login/logo.png"
                />
              </div>

              <form action="" method="post" id="login-form">
                <!--@AdminLoginFormBegin-->
                <div id="errtips" class="hide"></div>
                {:token()}
                <div class="input-group">
                  <div class="input-group-addon">
                    <span
                      class="glyphicon glyphicon-user"
                      aria-hidden="true"
                    ></span>
                  </div>
                  <input
                    type="text"
                    class="form-control"
                    id="pd-form-username"
                    placeholder="{:__('Username')}"
                    name="username"
                    autocomplete="off"
                    value=""
                    data-rule="{:__('Username')}:required;username"
                  />
                </div>

                <div class="input-group">
                  <div class="input-group-addon">
                    <span
                      class="glyphicon glyphicon-lock"
                      aria-hidden="true"
                    ></span>
                  </div>
                  <input
                    type="password"
                    class="form-control"
                    id="pd-form-password"
                    placeholder="{:__('Password')}"
                    name="password"
                    autocomplete="off"
                    value=""
                    data-rule="{:__('Password')}:required;password"
                  />
                </div>
                <!--@CaptchaBegin-->
                {if $Think.config.fastadmin.login_captcha}
                <div class="input-group">
                  <div class="input-group-addon">
                    <span
                      class="glyphicon glyphicon-option-horizontal"
                      aria-hidden="true"
                    ></span>
                  </div>
                  <input
                    type="text"
                    name="captcha"
                    class="form-control"
                    placeholder="{:__('Captcha')}"
                    data-rule="{:__('Captcha')}:required;length({$Think.config.captcha.length|htmlentities})"
                    autocomplete="off"
                  />
                  <span
                    class="input-group-addon"
                    style="padding: 0; border: none; cursor: pointer"
                  >
                    <img
                      src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha"
                      width="100"
                      height="30"
                      onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();"
                    />
                  </span>
                </div>
                {/if}
                <!--@CaptchaEnd-->
                {if $keeyloginhours>0}
                <div class="form-group checkbox">
                  <label
                    class="inline"
                    for="keeplogin"
                    data-toggle="tooltip"
                    title="{:__('The duration of the session is %s hours', $keeyloginhours)}"
                  >
                    <input
                      type="checkbox"
                      name="keeplogin"
                      id="keeplogin"
                      value="1"
                    />
                    {:__('Keep login')}
                  </label>
                </div>
                {/if}
                <div class="form-group">
                  <button
                    type="submit"
                    class="btn btn-success btn-lg btn-block"
                    style="
                      background: #ffc200;
                      color: #000;
                      border-radius: 40px;
                    "
                  >
                    {:__('Sign in')}
                  </button>
                </div>
                <!--@AdminLoginFormEnd-->
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    {include file="common/script" /}
  </body>
</html>
